// rfc => React Function Component
// !#1 导入
import React, { useState } from 'react'

export default function App() {
  // 参数表示默认状态
  // 返回值：数组（状态、操作状态的方法）
  // !#2 调用 setState 拿到状态和修改状态的方法
  const [count, setCount] = useState(0)
  const handleClick = () => {
    // 最后一个 setCount 会覆盖前面的
    /* setCount(count + 1)
    setCount(count + 2)
    setCount(count + 3) */
    // 形参 count，表示上一次更新完毕的 count，返回值表示要更新成的状态
    // 下面写会累计
    setCount((count) => count + 1)
    setCount((count) => count + 2)
    setCount((count) => count + 3)
    // 注意修改数据的表现形式，也是异步的！
    console.log(count) // 0
  }
  return (
    <div>
      <h3>计数器：{count}</h3>
      {/* //!#3 绑定点击事件，调用 setCount 修改 */}
      <button onClick={handleClick}>+1</button>
    </div>
  )
}
